<template>
  <div>
    <div>
      <el-input
        placeholder="请输入流水号或车牌"
        style="width:300px;float:right"
        v-model="pagination.search"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
      </el-input>
      <el-button type="danger" @click="deleteRow">测试删除所有记录</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="fID" label="流水号"></el-table-column>
      <el-table-column prop="catID" label="车牌"></el-table-column>
      <el-table-column prop="paperCard" label="证件是否录完">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.paperCard">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <!-- $router.push(`/media/indexEadit/${scope.row._id}`) -->
        <template slot-scope="scope">
          <el-button size="mini" @click="onCheck(scope.row)">查看</el-button>
          <el-button type="info" plain size="mini" @click="onBook(scope.row)">确认书</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        style="float:right"
        background
        layout="prev, pager, next"
        :total="pagination.total"
        :page-size="pagination.size"
        :current-page="pagination.current"
        @current-change="currentChange"
      ></el-pagination>
    </div>
    <!-- 查看资料 -->
    <el-dialog title="查看资料" :visible.sync="check" width="1000px">
      <means :infoData="infoData"></means>
      <br />
      <div class="flex-centent">
        <el-button type="primary" @click="$router.push(`/media/indexEadit/${infoData._id}`)">修 改 资 料</el-button>
        <el-button type="danger" @click="check=false">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 确认书打印预览 -->
    <el-dialog title="确认书打印预览" :visible.sync="Confirmation" width="1000px">
      <div class="flex-centent">
        <el-button type="primary" v-print="'#printDiv'">打 印</el-button>
        <el-button type="danger" @click="Confirmation=false">关 闭</el-button>
      </div>
      <br />
      <pdfDom id="printDiv" :user="infoData"></pdfDom>
    </el-dialog>
  </div>
</template>

  <script>
import pdfDom from "../../components/pdf"; //打印模板
import means from "../../components/means";
export default {
  components: {
    means,
    pdfDom
  },
  data() {
    return {
      Confirmation: false,
      infoData: {},
      tableData: [],
      check: false,
      pagination: {
        total: 10,
        current: 1,
        size: 10,
        search: ""
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    onBook(e) {
      this.infoData = e;
      this.Confirmation = true;
    },
    onCheck(e) {
      console.log('e', e)
      this.infoData = e;
      this.check = true;
    },
    onSearch(e) {
      this.getList({ name: e });
    },
    currentChange(e) {
      this.pagination.current = e;
      this.getList();
    },
    async getList() {
      let data = JSON.stringify(this.pagination);
      console.log(data);
      //   if (pages) {
      //     data = pages;
      //   }
      //   const list = await this.$http.get(`/cat`, data);
      const list = await this.$http.get(`/cats?search=${data}`);
      console.log(list);
        this.pagination = {
          total: list.data.total,
          current: list.data.current,
          size: list.data.size
        };
      this.tableData = list.data.list;
    },
    deleteRow() {
      this.$confirm(`此操作将永久删除所有记录, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await this.$http.delete(`/cats`);
        this.getList();
        this.$message({
          type: "success",
          message: "删除成功!"
        });
      });
    }
  }
};
</script>

<style>
  .el-table .cell{
    text-align: center !important;
  }
</style>